<template>
  <div class="car-server-detaild" >

    <l-page-bar>
      汽车服务详情页
    </l-page-bar>

    <l-page-path>
      {{detaild.type}}
    </l-page-path>

      <div class="car-server-detaild-content page-content">

        <i-row>

          <i-col>
            <l-detaild :detaild='detaild' :labels='labels'></l-detaild>
          </i-col>
          
        </i-row>
        
        <l-comment></l-comment>

      </div>

    
      
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import PagePath from '@/components/page_path/index.vue';
import PageBar from '@/components/page_bar/index.vue';
import Detaild from '@/components/detaild/index.vue';
import commendData from '@/utils/commend';
import Comment from "@/components/comment/index.vue";


export interface ICarDetaild{

  type: string,
  name: string,
  owner: string,
  phone: string,
  address: string,
  web: string,
  region: string,
  whatsapp: string,
  qrCode: string,
  imgs: Array<string>

}

@Component({
  components:{

    'l-detaild': Detaild,
    'l-page-path': PagePath,
    'l-page-bar': PageBar,
    'l-comment': Comment

  }
})
export default class CarSeverDetaild extends Vue {

  detaild: ICarDetaild | {} = {}
  $API: any
  labels = commendData.carServeDetaild
  
  created(){
    this.getCarDetail()
  }

  getCarDetail(){

    let { id } = this.$route.params;
    let $API:any = this.$API;
    
    $API.getServeDetailed().then((res:any) =>{
        this.detaild = res
    })
    
  }
  
}

</script>
<style lang="less">

.car-server-detaild{}

</style>
